<template>
	<div class="category">
		<nav-bar>
			<template v-slot:left>
				<img src="~/assets/images/left.png" alt="return icon" style="height: 20px">
			</template>
			<template v-slot:center>图书分类</template>
		</nav-bar>
		<div id="main-box">
			
			<van-sidebar v-model="activeKey" class="leftmenu">
				<van-collapse v-model="activeName" accordion>
					<van-collapse-item v-for="item in categorys" :key="item.id"
					                   :title="item.name">
						<van-sidebar-item v-for="sub in item.children.slice(0,4)" :key="sub.id"
						                  :title="sub.name" @click="getGoods(sub.id)"/>
					</van-collapse-item>
				</van-collapse>
			</van-sidebar>
		
		</div>
		<div class="ordertab">
			<van-tabs v-model="active" @click="tabClick">
				<van-tab title="销量排序"></van-tab>
				<van-tab title="价格排序"></van-tab>
				<van-tab title="好评排序"></van-tab>
			
			</van-tabs>
		</div>
		
		<div class="goodslist">
			<div class="content">
				<van-card
						v-for="item in showGoods" :key="item.id"
						@click="itemClick(item.id)"
						:price="item.price"
						:title="item.title"
						:thumb="item.cover_url"
						:lazy-load="true"
				
				/>
			</div>
		
		</div>
		<back-top @bTop="bTop" ></back-top>
	</div>

</template>

<script>


import {ref, reactive, onMounted, computed} from 'vue'
import BetterScroll from 'better-scroll' // 第三方滚动模块
import {useRouter} from 'vue-router'

import NavBar from "../../components/common/navbar/NavBar";
import {getCategory, getCategoryGoods} from 'network/category'
import backTop from "@/components/common/backtop/backTop";


export default {
	name: "Category",
	components: {
		NavBar,
		backTop
	},
	setup() {
		let activeKey = ref(0) // 默认选中的小分类选项
		const categorys = ref([]) // 分类数据
		let activeName = ref(0) // 默认选中的大分类选项
		let active = ref(0) // 当前激活的排序选项
		let currentOrder = ref('sales') // 当前排序条件
		let scroll = reactive({}) // 滚动工具
		let isShowBackTop = ref(false) // 是否显示回到顶部按钮
		const router = useRouter() // 路由
		
		// 数据模型
		const goods = reactive({
			"sales": {page: 1, list: []},
			"price": {page: 1, list: []},
			"collects_count": {page: 1, list: []}
		})
		// 获取显示数据的通用方法
		const init = () => {
			getCategoryGoods(currentOrder.value).then(res => {
				goods[currentOrder.value].list = res
				scroll && scroll.refresh() // 重新计算高度
				
			}).catch()
			
		}
		onMounted(() => {
			// 初始获取分类数据
			getCategory().then(res => {
				categorys.value = res.categorys
				init()
			}).catch()
			
			// 实例化滚动条对象
			scroll = new BetterScroll(document.querySelector('.goodslist'), {
				scrollY: true, // 允许纵向滑动
				probeType: 3, // 0,1,2,3表示只要在运行就触发scroll事件
				click: true, // 是否允许点击
				pullUpLoad: true, // 上拉加载更多,默认false
				mouseWheel:true,
			})
			
			// 触发滚动事件
			scroll.on('scroll', (position) => {
				isShowBackTop.value = (-position.y)>300 // 将当前y坐标的值是否大于300像素
			})
			
			// 触发上拉事件
			scroll.on('pullingUp', () => {
			
			})
			// //上拉完成
			scroll.finishPullUp()
		})
		
		
		// 排序选项卡单击事件
		const tabClick = (index) => {
			let arr = ['sales', 'price', 'collects_count']
			currentOrder.value = arr[index]
			init()
			scroll && scroll.refresh() // 重新计算高度
		}
		
		// 初始获取排序的数据
		const getGoods = () => {
			init()
		}
		
		
		// 要显示的数据
		const showGoods = computed(() => {
			return goods[currentOrder.value].list
		})
		
		// 单击图标回到顶部
		const bTop = () => {
		scroll.scrollTo(0,-45,1000) // x,y坐标,移动时间
		}
		
		// 单击商品跳转到详情
		const itemClick = (id)=>{
			router.push({path: '/detail', query: {id}})
		}
		
		return {
			activeKey,
			categorys,
			activeName,
			active,
			tabClick,
			getGoods,
			showGoods,
			isShowBackTop,
			bTop,
			itemClick,
		}
	}
}

</script>

<style scoped>
.category {
	margin-top: 45px;
	position: relative;
}

#main-box {
	margin-top: 45px;
	height: 200px;
	display: flex;
}

.leftmenu {
	position: fixed;
	top: 95px;
	left: 0;
	/*background-color: green;*/
	/*height: 200px;*/
	width: 130px;
	z-index: 9;
}

.ordertab {
	/*background-color: red;*/
	flex: 1;
	float: right;
	position: fixed;
	top: 45px;
	right: 0;
	left: 130px;
	height: 50px;
}

.goodslist {
	/*background-color: #39a9ed;*/
	position: absolute;
	top: 45px;
	left: 130px;
	right: 0;
	height: 100vh;
	padding: 10px;
	
}
.content{
	/*padding-top:100px;*/
}

.van-card_thumb {
	width: 100px;
}

.van-card__price {
	color: red;
}
.van-sidebar-item{
	padding:10px;
	z-index: 1;
	
}
</style>